<template>

  <div class="operate-btn-wrap">
    <el-button class="operate_add" type="primary" @click="addUser">
      <i class="iconfont iconicon_add"></i>
      {{ btnTextObj.add }}
    </el-button>

    <!-- <popover :visible-pop.sync="visiblePop" @submit="deleteUser">
      <el-button class="operate_del" type="info" @click="showPop">
        <i class="iconfont iconicon_trash"></i>
        {{ btnTextObj.del }}
      </el-button>
    </popover> -->
    <el-button :disabled="hasSelected ? false : true" class="operate_del" type="info">
      <i class="iconfont iconicon_trash"></i>
      {{ btnTextObj.del }}
    </el-button>
    <!--
    <el-button v-if="btnAuthObj.enable" :disabled="hasSelected ? false : true" class="operate_enable" type="info" @click="enableUser">
      <i class="iconfont iconicon_enabled"></i>
      {{ btnTextObj.enable }}
    </el-button>

    <el-button v-if="btnAuthObj.disable" :disabled="hasSelected ? false : true" class="operate_disabled" type="info" @click="disableUser">
      <i class="iconfont iconicon_disabled"></i>
      {{ btnTextObj.disable }}
    </el-button> -->
  </div>
</template>

<script>
export default {
  name: 'OperateBtnGroup',
  components: {
  },
  inheritAttrs: false,
  data() {
    return {
      visiblePop: false,
      selectIndex: -1
    }
  },
  computed: {
    btnAuthObj() {
      return Object.assign({
        enable: true,
        disable: true
      }, this.btnAuth)
    },
    btnTextObj() {
      return Object.assign({
        add: '添加角色',
        del: '删除角色',
        enable: '启用',
        disable: '禁用'
      }, this.btnText)
    },
    hasSelected() {
      return this.selectIndex >= 0
    }
  },
  created() {
  },
  methods: {
    addUser() {
      this.$emit('addUser')
    },
    deleteUser() {
      this.$emit('deleteUser')
    },
    enableUser() {
      this.$emit('enableUser')
    },
    disableUser() {
      this.$emit('disableUser')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/variables";
  @import "~@/assets/styles/mixin";

  .operate-btn-wrap {
    height: 32px;
    ::v-deep .el-button--info {
      background-color: $operateBtnBack !important;
      border-color: $operateBtnBack !important;
    }
    .el-button--info.is-disabled,
    .el-button--info.is-disabled:hover,
    .el-button--info.is-disabled:focus,
    .el-button--info.is-disabled:active {
      color: #495057 !important;
      background-color: #E3E4E8 !important;
      border-color: #D8D9DF !important;
    }
    ::v-deep .el-button--small {
      width: auto;
      height: 32px;
      font-size: 13px !important;
      padding: 9px 12px 10px 12px !important;
      border: 0;
      float: left;
      i {
        font-size: 12px !important;
      }
    }
  }
</style>
